<script setup lang="tsx" name="XtxTabs">
import { useSlots, VNode, RendererNode, RendererElement, provide, toRefs } from 'vue'
const slots = useSlots() // 插槽列表
const arr = slots?.default?.() // 默认插槽列表数据
const panes: any = []
// console.log(arr)// 循环panes 判断一下 每一项的name是否是 XtxTabsPane

arr?.forEach((item: any) => {
  if (item?.type.name === 'XtxTabsPane') {
    panes.push(item)
  } else {
    if (item.children.length) {
      item.children.forEach((pane: any) => {
        panes.push(pane)
      })
    }
  }
})

const props = defineProps({ modelValue: { type: String, default: '' } })
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
}>()
// 点击某个标题将对应标题的name同步给父组件
const clickFn = (item: VNode<RendererNode, RendererElement, {
  [key: string]: any;
}>) => {
  emit('update:modelValue', item?.props?.name)
  // console.log(123)
}
// 对props中的modelValue进行响应式处理
const { modelValue } = toRefs<any>(props)
provide('activeName', modelValue)
const VNodeBox = () => {
  // 循环展示标题
  const navs = (
    <nav>
      {
        panes?.map((item: any) => {
          /* {{ active: props.modelValue === item?.props?.name }}
      外层{ } 表示的是要解析变量了
      内层{ } 表示的是对象
      */
          return <a onClick={() => { clickFn(item) }} class={{ active: props.modelValue === item?.props?.name }} href="javascript:;">{item?.props?.label}</a>
        })
      }

    </nav>
  )
  return (<div class="xtx-tabs">
    {[navs, panes]}
  </div>)
}
</script>
<template>
  <VNodeBox></VNodeBox>
</template>

<style lang="less">
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>